<template>
  <div>
    <div class="topOperation">
      <div class="tabsBox" v-show="tabsList.length > 0" ref="scrollContainer">
        <div
          v-for="(tabs, index) in tabsList"
          :key="index"
          :class="{ on: activeValue == tabs.val }"
          class="tabsItem"
          :style="{ width: `calc(100% / ${tabsList.length} )` }"
          ref="tabItem"
          @click="handleTabs(tabs.val)"
        >
          <el-tooltip class="item" effect="dark" :content="tabs.name" placement="bottom" :open-delay="600">
            <div class="ellipsis text-center">{{ tabs.name }}</div>
          </el-tooltip>
        </div>
      </div>
      <div class="btnBox">
        <el-button-group style="margin-right: 10px">
          <el-button class="li" size="mini" @click="handleFy(-1)" type="primary" icon="el-icon-arrow-left"></el-button>
          <el-button class="li" size="mini" @click="handleFy(1)" type="primary" icon="el-icon-arrow-right"></el-button>
        </el-button-group>
        <el-button-group>
          <!-- <el-button type="primary" @click="handleOperation" icon="el-icon-folder-opened"></el-button> -->
          <el-tooltip class="item" effect="dark" content="保存" placement="bottom" :open-delay="600">
            <el-button type="warning" @click="submit">
              <span class="iconfont icon-baocun"></span>
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="导出" placement="bottom" :open-delay="600">
            <el-button type="primary" @click="printSpecificPart">
              <span class="iconfont icon-daochu"></span>
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="上传附件" placement="bottom" :open-delay="600">
            <el-button type="primary" @click="handleOperation">
              <span class="iconfont icon-shangchuanwenjian"></span>
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="数据引入" placement="bottom" :open-delay="600">
            <el-button type="primary" @click="Introduction">
              <span class="iconfont icon-yinru"></span>
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="小数点方案" placement="bottom" :open-delay="600">
            <el-button type="primary" @click="onDecimalPoint">
              <span class="iconfont icon-xiaoshudianyouyi"></span>
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="特殊符号" placement="bottom" :open-delay="600">
            <el-button type="primary" @click="onSpecialCharacter">
              <span class="iconfont icon-s"></span>
            </el-button>
          </el-tooltip>
          <!-- <el-button type="primary" @click="handleOperation" icon="el-icon-document-copy"></el-button>
          <el-button type="primary" @click="handleOperation" icon="el-icon-mouse"></el-button>
          <el-button type="primary" @click="handleOperation" icon="el-icon-link"></el-button>-->
          <el-tooltip class="item" effect="dark" content="关闭" placement="bottom" :open-delay="600">
            <el-button type="primary" @click="closeWindow" icon="el-icon-error"></el-button>
          </el-tooltip>
        </el-button-group>
      </div>
    </div>
    <div class="empty-content"></div>
    <special-character-view ref="specialCharacterView" :activeValue="activeValue" />
    <set-decimal-point ref="setDecimalPoint" :activeValue="activeValue" />
  </div>
</template>

<script>
import Bus from "@/utils/bus";
import { handleFocus } from "@/views/reportForms/utils";
import SpecialCharacterView from "./SpecialCharacterView.vue";
import SetDecimalPoint from "./SetDecimalPoint.vue";
export default {
  name: "topOperation",
  components: { SpecialCharacterView, SetDecimalPoint },
  props: {
    tabsList: {
      type: Array,
      default: () => []
    },
    activeVal: {
      type: [String, Number],
      default: () => ""
    }
  },
  data() {
    return {
      activeValue: "",
      titleWidthArr: []
    };
  },
  watch: {
    activeVal(newValue, oldValue) {
      this.activeValue = newValue;
    },
    activeValue(newValue, oldValue) {
      if (newValue) {
        this.$emit("currentActive", this.activeValue);
        handleFocus("");
      }
    },
    tabsList: {
      // immediate: true,
      deep: true,
      handler(val) {
        val && val.length && this.$nextTick(() => this.getTitleWidth());
      }
    }
  },
  methods: {
    handleTabs(val) {
      this.activeValue = val;
      // this.$emit("currentActive", this.activeValue)
    },
    handleOperation() {
      this.$message({
        showClose: true,
        message: "正在开发...."
      });
    },
    // 下一页
    handleFy(num) {
      let index = this.tabsList.findIndex((item) => item.val == this.activeValue);
      index = index + num;
      if (index >= this.tabsList.length) {
        this.$message({ showClose: true, message: "最后一页了！" });
        return;
      }
      if (index < 0) {
        this.$message({ showClose: true, message: "第一页了！" });
        return;
      }
      this.activeValue = this.tabsList[index].val;
      this.$refs.scrollContainer.scrollLeft = this.titleWidthArr[index];
    },
    // 计算左侧偏移量
    getTitleWidth() {
      this.$nextTick(() => {
        let arr = [];
        for (let i = 0; i < this.tabsList.length; i++) {
          const offsetLeft = this.$refs.tabItem[i].offsetLeft - 50;
          // const clientWidth = this.$refs.tabItem[i].clientWidth
          arr.push(offsetLeft);
        }
        this.titleWidthArr = arr;
      });
    },

    // 退出
    closeWindow() {
      window.close();
    },
    // 保存
    submit() {
      // Bus.$emit('Introduction', '');
      this.$emit("reportFormsSubmit", this.activeValue);
    },
    // 打印
    printSpecificPart() {
      this.$emit("printSpecificPart");
    },
    // 特殊字符
    onSpecialCharacter() {
      this.$refs.specialCharacterView.init();
    },
    // 数据引入
    Introduction() {
      this.$emit("Introduction", this.activeValue);
    },
    // 小数点方案
    onDecimalPoint() {
      const activeArr = this.tabsList.filter((v) => v.val == this.activeValue);
      this.$refs.setDecimalPoint.init(activeArr);
    },
    // // 小数点方案使用
    // setXsd(){
    //   this.$refs.setDecimalPoint.init(activeArr);
    // }
  }
};
</script>

<style scoped lang="scss">
.topOperation {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  background: #f7f7f9;
  position: fixed;
  top: 0;
  z-index: 100;

  .tabsBox {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    height: 100%;
    width: calc(100% - 450px);
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none; // 谷歌隐藏滚动条
    list-style-type: none;

    ::v-deep .el-tabs__header {
      width: 90%;
      margin: 0 !important;
    }

    .tabsItem {
      cursor: pointer;
      color: #979797;
      // display: flex;
      // align-items: center;
      // height: 60%;
      margin-left: 8px;
      padding: 5px 10px 2px 10px;
      background: #e3e3e3;
      border-radius: 4px 4px 0 0;
      max-width: 230px;
      min-width: 180px;
      width: 100%;
      white-space: nowrap !important;
      /* 防止文本换行 */
      overflow: hidden !important;
      /* 隐藏超出容器的部分 */
      text-overflow: ellipsis !important;

      /* 用省略号表示被裁剪的文本 */
      &.on {
        color: #fff;
        background: #46a6ff;
      }
    }

    .acticeTabs {
      cursor: pointer;
      color: #fff;
      display: flex;
      align-items: center;
      height: 60%;
      padding: 5px 10px 2px 10px;
      background: #31b0d5;
      margin-left: 8px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      max-width: 230px;
      white-space: nowrap !important;
      /* 防止文本换行 */
      overflow: hidden !important;
      /* 隐藏超出容器的部分 */
      text-overflow: ellipsis !important;
      /* 用省略号表示被裁剪的文本 */
    }
  }

  .btnBox {
    position: absolute;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
    width: 470px;
    // margin-right: 8px;

    .li {
      display: flex;
      justify-content: center;
      align-content: center;
      width: 20px;
    }
  }
}

// ::v-deep ::-webkit-scrollbar {
//   width: 0;
//   height: 0;
// }

.empty-content {
  height: 50px;
}
</style>
